<template>
    <div>
        <van-nav-bar id="reset" title="积分详情" left-arrow @click-left="backHandle" fixed z-index="100" />


        <div class="pageCon fuPage">
            <div class="topBox">
                <div>
                    <span>当前积分</span>
                    <span>{{ nowTotal }}</span>
                    <div>
                        <!-- <span>积分规则，积分是干什么用的..</span> -->
                        <span @click="applyHandle">申请义诊<van-icon name="arrow" /></span>
                    </div>
                </div>
                <div>
                    <div>
                        <span>累计总积分 </span>
                        <span>{{ total }}</span>
                    </div>
                    <div>
                        <span>累计消费积分</span>
                        <span>{{ usedTotal }}</span>
                    </div>
                </div>
            </div>
            <div class="listBox">
                <div class="listTop">
                    <span>
                        积分详情
                    </span>
                    <!-- <div>
                        <span>全部 <van-icon name="arrow" /></span>
                    </div> -->
                </div>
                <div class="listMain">
                    <template v-if="historyList.length != 0">
                        <div class="itemBox" v-for="(item, index) in historyList" :key="index">
                            <div>
                                <span>{{ item.taskName }}</span>
                                <span>{{ item.createTime }}</span>
                            </div>
                            <div>
                                +{{ item.scoreNum }}
                            </div>
                        </div>
                    </template>
                    <div class="emptyBox" v-else>
                        <img src="../../assets/tip_content.png">
                    </div>

                </div>
            </div>
        </div>



    </div>

</template>

<script>


import { getUserTaskInfo } from '../../network/user'
export default {
    name: 'HomeR',
    data() {
        return {
            historyList: [],

            nowTotal: 0,
            total: 0,
            usedTotal: 0,
            isLoading: false


        }
    },
    mounted() {

    },
    methods: {


        applyHandle() {
            this.$toast('当前暂无义诊活动')
        },

        onSelect(e) {
            console.log(e);
            this.type = e.value
        },
        backHandle() {
            this.$router.back()
        },
        getList() {
            getUserTaskInfo({
                userId: localStorage.userId
            }).then(res => {
                if (res.flag) {
                    this.isLoading = false
                    this.nowTotal = 0
                    this.total = 0
                    res.data.forEach(item => {
                        this.nowTotal += item.scoreNum
                    })
                    this.total = this.nowTotal
                    this.historyList = res.data
                }
            })
        },
        pullHandle() {

            this.isLoading = true
            this.getList()
        },
    },
    created() {

        this.getList()
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}

</script>

<style lang='less' scoped>
.pageCon {

    padding: 112px 20px 0 !important;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #EEF1F7;
    overflow-y: scroll;
}

.topBox {
    margin-bottom: 20px;
    width: 710px;
    height: 416px;
    background: #FFFFFF;
    border-radius: 20px;
}

.topBox>div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 284px;
    border-bottom: 2px solid #f2f2f2;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #333333;
}

.topBox>div:first-child>span:nth-child(2) {
    font-weight: bold;
    font-size: 80px;
}

.topBox>div:first-child>div:nth-child(3) {
    font-size: 24px;
    color: #999999;
    line-height: 44px;
}

.topBox>div:first-child>div:nth-child(3)>span:nth-child(2) {
    margin-left: 70px;
    color: #14A870 !important;
}

.topBox>div:nth-child(2) {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topBox>div:nth-child(2)>div {
    position: relative;
    margin-top: 30px;
    box-sizing: border-box;
    padding-left: 68px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #999999;

}

.topBox>div:nth-child(2)>div>span:nth-child(2) {
    margin-top: 14px;
    font-weight: bold;
    font-size: 28px;
    color: #333333;
}

.topBox>div:nth-child(2)>div:nth-child(2)::before {
    position: absolute;
    left: 0px;
    display: inline-block;
    content: '';
    width: 2px;
    height: 58px;
    background: #F2F2F2;
}

.listBox {
    width: 100%;
    height: calc(100% - 436px);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 2px 6px 0px rgba(51, 51, 51, 0.08);
    overflow-y: scroll;
}


.listTop {
    position: sticky;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 30px 34px 10px 44px;
    width: 100%;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 28px;
    color: #333333;
    background: #fff;
}

.listTop>div>span {
    margin-left: 30px;
    color: #999999;
}

.itemBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 44px 32px 44px 44px;
    width: 100%;
    border-bottom: 2px solid #f2f2f2;
}

.itemBox>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
    line-height: 38px;

}

.itemBox>div>span:nth-child(2) {
    margin-top: 2px;
    font-size: 24px;
    color: #999999;
}

.itemBox>div:nth-child(2) {
    display: flex;
    align-items: flex-end;
    // background: aqua;
}

#reset /deep/ .van-nav-bar__left .van-nav-bar__text,
#reset /deep/ .van-nav-bar__left .van-icon {
    color: #333 !important;
}

.emptyBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.emptyBox>img {
    margin-top: 400px;
    width: 374px;
    height: 314px;
}
</style>